<template>
  <div class="world-body">
    <div class="world-qian">
      <div class="world-up">
           <Select
                style="flex: 3;"
                size="small"
                :value="richTextAttrs.fontname"
                option-label-prop="label"
                @change="value => emitRichTextCommand('fontname', value as string)"  class="first-select" :disabled="clickDisable">
                <template #suffixIcon>
                    <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
                </template>
                <SelectOptGroup label="系统字体">
                  <SelectOption v-for="font in availableFonts" :key="font.value" :value="font.label" :label="font.label" >
                    <i class="iconfont icon-right check-size font-check" v-if="richTextAttrs.fontname==font.label" :class="richTextAttrs.fontname==font.label?'active':''"></i>
                    <span :style="{ fontFamily: font.value }">{{font.label}}</span>
                  </SelectOption>
                </SelectOptGroup>
                <SelectOptGroup label="在线字体">
                  <SelectOption v-for="font in WEB_FONTS" :key="font.label" :value="font.value" :label="font.label">
                      <i class="iconfont icon-right check-size font-check" v-if="richTextAttrs.fontname==font.label" :class="richTextAttrs.fontname==font.label?'active':''"></i>
                      <span>{{font.label}}</span>
                  </SelectOption>
                </SelectOptGroup>
            </Select>
            <Select
                style="flex: 2;"
                size="small"
                :value="richTextAttrs.fontsize"
                option-label-prop="label"
                :disabled="clickDisable"
                @change="value => emitRichTextCommand('fontsize', value as string)"
            >
                <template #suffixIcon>
                    <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
                </template>
                <SelectOption v-for="fontsize in fontSizeOptions" :key="fontsize" :value="fontsize">
                  <i class="iconfont icon-right check-size font-dig" v-if="richTextAttrs.fontsize==fontsize" :class="richTextAttrs.fontsize==fontsize?'active':''"></i>
                  <span> {{fontsize}}</span>
                </SelectOption>
            </Select>
            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大字体">
                 <Button  size="small" type="text" @click="emitRichTextCommand('fontsize-add')" :disabled="clickDisable"> 
                     <i class="iconfont icon-24gl-fontSizeIncrease font-bold" ></i> 
                 </Button>
            </Tooltip>
            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小字体">
               <Button  size="small" type="text" @click="emitRichTextCommand('fontsize-reduce')" :disabled="clickDisable">
                 <i class="iconfont icon-24gl-fontSizeDecrease font-bold"></i> 
               </Button>
            </Tooltip>
      </div>
      <div class="world-down">
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="加粗">
            <Button  size="small" type="text" @click="emitRichTextCommand('bold')" :class="{'active':richTextAttrs.bold==true}" :disabled="clickDisable"> <IconTextBold /> </Button>
         </Tooltip>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="斜体">
           <Button  size="small" type="text" @click="emitRichTextCommand('underline')" :class="richTextAttrs.underline==true?'active':''" :disabled="clickDisable"><IconTextUnderline /></Button>
         </Tooltip>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除线">
           <Button  size="small" type="text" @click="emitRichTextCommand('strikethrough')" :class="richTextAttrs.strikethrough==true?'active':''" :disabled="clickDisable"><IconStrikethrough /></Button>
         </Tooltip>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下滑线">
           <Button  size="small" type="text" @click="emitRichTextCommand('em')" :class="richTextAttrs.em==true?'active':''" :disabled="clickDisable"><IconTextItalic /></Button>
         </Tooltip>
         <Dropdown :trigger="['click']" :disabled="clickDisable">
            <Button  size="small" type="text" >
              <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="字间距">
                <i class="iconfont icon-zijianju down-size"></i>
              </Tooltip>
            </Button>
            <template #overlay>
                <Menu class="world-space">
                    <MenuItem   v-for="item in wordSpaceOptions" :key="item" @click="updateWordSpace(item)">
                         <i class="iconfont icon-right check-size font-dig"  v-if="wordSpace==item" :class="wordSpace==item?'active':''" ></i>
                        <span >{{item}}px</span>
                    </MenuItem>
                </Menu>
            </template>
        </Dropdown>
        <Popover trigger="click">
            <template #content> 
                <ColorPicker
                    :modelValue="richTextAttrs.backcolor"
                    @update:modelValue="value => emitRichTextCommand('backcolor', value)" v-if="!clickDisable"
                />
            </template>
            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" :title="clickDisable==false?'文字高亮':''">
              <Button size="small" type="text" class="text-color-btn" style="flex: 3;" :disabled="clickDisable">
                  <IconHighLight />
                  <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
              </Button>
            </Tooltip>
        </Popover>
        <Popover trigger="click">
            <template #content>
                <ColorPicker
                    v-if="!clickDisable"
                    :modelValue="richTextAttrs.color"
                    @update:modelValue="value => emitRichTextCommand('color', value)"
                />
            </template>
            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" :title="clickDisable==false?'字体颜色':''">
               <Button size="small" type="text" class="text-color-btn" style="flex: 3;" :disabled="clickDisable">
                    A  <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
                    <div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
                </Button>
            </Tooltip>
        </Popover>
      </div>
    </div>
    <Button size="small" type="text" class="clear-Format"  @click="emitRichTextCommand('clear')" :disabled="clickDisable">
        <IconFormat class='font-size' />
        <span>清除格式</span>
    </Button>
    <div class="line"></div>
    <div class="paragraph-set">
      <div class="grah-up">
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" :title="clickDisable==false?'项目符号':''">
              <Button  size="small" type="text" @click="emitRichTextCommand('bulletList')" :class="{'active':richTextAttrs.bulletList==true}" :disabled="clickDisable"> 
                  <IconList />
                  <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
              </Button>
         </Tooltip>
         <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" :title="clickDisable==false?'项目编号':''">
             <Button  size="small" type="text"  @click="emitRichTextCommand('orderedList')" :class="{'active':richTextAttrs.orderedList==true}" :disabled="clickDisable"> 
                <IconOrderedList />
                <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
            </Button>
         </Tooltip>
         <Dropdown :trigger="['click']" :disabled="clickDisable">
            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5"  :title="clickDisable==false?'行间距':''">
                <Button  size="small" type="text" :disabled="clickDisable">
                  <IconRowHeight />
                   <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
                </Button>
            </Tooltip>
            <template #overlay>
                <Menu class="world-space">
                    <MenuItem   v-for="item in lineHeightOptions" :key="item" @click="updateLineHeight(item)">
                        <i class="iconfont icon-right check-size font-dig"  v-if="lineHeight==item" :class="lineHeight==item?'active':''"></i>
                        <span :class="lineHeight==item?'active':''">{{item}}倍</span>
                    </MenuItem>
                </Menu>
            </template>
        </Dropdown>
      </div>
      <div class="graf-dow">
          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" v-for="(item,index) in fontPosition" :title="clickDisable==false?item.label:''" :key="index">
            <Button  size="small" type="text" @click="emitRichTextCommand('align',item.value)" :class="richTextAttrs.align==item.value?'active':''" :disabled="clickDisable"> 
                <IconAlignTextLeft v-if="item.value=='left'"/>
                <IconAlignTextCenter v-if="item.value=='center'"/>
                <IconAlignTextRight v-if="item.value=='right'"/>
            </Button>
          </Tooltip>
      </div>
    </div>
    <div class="line"></div>
    <tool-right/>
    <fill-seting></fill-seting>
    <div class="line"></div>
    <Popover :trigger="['click']" placement="bottom" v-model:visible="showTrans">
        <div class="menu-item">
          <p>
              <i class="iconfont icon-pingfenxingxing-kong"/>
          </p>
          <p class="add_label" @click="showTrans=true">切换</p>
        </div>       
        <template #content>
             <transtom-change @close="value => {  showTrans = value }"></transtom-change>
        </template>
    </Popover>
    <div class="line"></div>
    <Dropdown :trigger="['click']">
         <div class="menu-item"> 
          <p>
            <i class="iconfont icon-yemianshezhi"/>
             <i class="iconfont icon-sanjiaoxing_shang down-size"></i>
          </p>
          <p class="add_label">页面设置</p>
        </div>  
        <template #overlay>
            <Menu>
                <MenuItem >
                    <Button  size="small" type="text" :disabled="pageset" @click="handleFill">  <i class="iconfont icon-background  ant-btn-sm" style="font-size: 14px;"></i>背景填充</Button>  
                </MenuItem>
                 <MenuItem >
                    <SubMenu>
                        <Dropdown :trigger="['click']" placement="topRight">
                            <Button  size="small" type="text" ><IconFullScreen class="handler-item viewport-size-adaptation  ant-btn-sm" />画布尺寸</Button>
                            <template #overlay>
                                <Menu >
                                  <MenuItem class="line-div" @click="updateViewportRatio(0.5625)">
                                      <span>宽屏16:9</span>
                                  </MenuItem>
                                  <MenuItem class="line-div" @click="updateViewportRatio(0.625)">
                                       <span>宽屏16:10</span>
                                  </MenuItem>
                                  <MenuItem class="line-div" @click="updateViewportRatio(0.75)">
                                       <span>标准4:3</span>
                                  </MenuItem>
                                </Menu>
                            </template>
                        </Dropdown>
                    </SubMenu>
                </MenuItem>
            </Menu>
        </template>
    </Dropdown>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import useGlobalHotkey from '@/hooks/useGlobalHotkey'
import usePasteEvent from '@/hooks/usePasteEvent'
import { message } from 'ant-design-vue'
import { PPTTextElement } from '@/types/slides'
import emitter, { EmitterEvents, RichTextAction } from '@/utils/emitter'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import { WEB_FONTS } from '@/configs/font'
import ToolRight from './ToolRight.vue'
import FillSeting from './FillSeting.vue'
import TranstomChange from './TranstormChange.vue'
const mainStore = useMainStore()
const { dialogForExport } = storeToRefs(mainStore)
const closeExportDialog = () => mainStore.setDialogForExport('')
const remarkHeight = ref(40)
const slidesStore = useSlidesStore()
const { handleElement, handleElementId, richTextAttrs, availableFonts } = storeToRefs(useMainStore())
useGlobalHotkey()
usePasteEvent()
const fontSizeOptions = [
  '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',
  '36px', '40px', '44px', '48px', '54px', '60px', '66px', '72px', '76px',
  '80px', '88px', '96px', '104px', '112px', '120px',
]
const fontPosition = [
  { label: '左对齐', value: 'left' },
  { label: '居中', value: 'center' },
  { label: '右对齐', value: 'right' },
]
const { addHistorySnapshot } = useHistorySnapshot()
const lineHeightOptions = [0.9, 1.0, 1.15, 1.2, 1.4, 1.5, 1.8, 2.0, 2.5, 3.0]
const wordSpaceOptions = [0, 1, 2, 3, 4, 5, 6, 8, 10]
const linkPopoverVisible = ref(false)
const wordSpace = ref<number>()
const lineHeight = ref<number>()
const showTrans = ref(false)
const clickDisable = ref(false)  
const pageset = ref(false)
const updateElement = (props: Partial<PPTTextElement>) => {
  slidesStore.updateElement({ id: handleElementId.value, props })
  addHistorySnapshot()
}
watch(richTextAttrs, () => linkPopoverVisible.value = false)
watch(handleElement, () => {
  // if (!handleElement.value || handleElement.value.type !== 'text') return
  if (handleElement.value === null) { // 当焦点是当前页面时，页面设置按钮可点击
    pageset.value = false
  }
  else {
    pageset.value = true
  }
  if (!handleElement.value || handleElement.value.type !== 'text') { // 当页面的焦点不是文本域时，禁止字体相关设置的按钮点击
    clickDisable.value = true
    return 
  }
  mainStore.setChartStyleShow(false)
  clickDisable.value = false
  wordSpace.value = handleElement.value.wordSpace || 0
  lineHeight.value = handleElement.value.lineHeight || 1.5
}, { deep: true, immediate: true })
// 发射富文本设置命令
const emitRichTextCommand = (command: string, value?: string) => {
  emitter.emit(EmitterEvents.RICH_TEXT_COMMAND, { action: { command, value } })
}
const updateLink = (link?: string) => {
  if (link) {
    const linkRegExp = /^(https?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/
    if (!linkRegExp.test(link)) return message.error('不是正确的网页链接地址')
  }
  emitRichTextCommand('link', link)
  linkPopoverVisible.value = false
}
// 设置字间距
const updateWordSpace = (value: number) => {
  updateElement({ wordSpace: value })
  wordSpace.value = value
}
// 设置行高
const updateLineHeight = (value: number) => {
  updateElement({ lineHeight: value })
  lineHeight.value = value
}
// 背景填充
const handleFill = () => {
  mainStore.setBackFill(true)
  mainStore.setShadow(false)
}
// 设置画布尺寸（宽高比例）
const updateViewportRatio = (value: number) => {
  slidesStore.setViewportRatio(value)
}
</script>
<style lang="scss" scoped>
.world-body {
  display: flex;
  height: 60px;
  justify-content: flex-start;
  align-items: center;
  .world-qian {
    display: flex;
    flex-direction: column;
    .world-up {
      .first-select {
        margin-right: 10px;
        width: 120px;
      }
    }
    .world-down {
      margin-top: 5px;
      .row {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      .world-space {
        height: 250px;
        overflow-y: scroll;
        width: 60px !important;
        .check-size {
          position: absolute;
          left: 2px;
          top: 11px;
          font-size: 10px;
        }
        .font-dig {
          left: 0px !important;
        }
      }
    }
  }
  .clear-Format {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    .font-size {
      font-size: 20px;
    }
    span {
      font-size: 12px;
      margin-top: 3px;
    }
  }
  .line {
    width: 1px;
    height: 56px;
    margin: 0 15px;
    background-color: #eee;
  }
  .paragraph-set {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    .graf-dow {
      margin-top: 5px;
    }
  }
  .fill-seting {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
  }
  .active {
    color: #d14424 !important;
  }
  .down-size {
    font-size: 10px;
    margin-left: 1px;
  }
  .text-color-block {
    width: 10px;
    height: 2px;
    background-color: red !important;
    margin-top: -3px;
  }
  ::v-deep .ant-dropdown {
    min-width: 60px !important;
  }
  .check-size {
    position: absolute !important;
    left: 2px ;
    top: 11px !important;
    font-size: 10px !important;
  }
  .menu-item {
    width: 60px;
    text-align: center;
    display: flex;
    cursor: pointer;
    justify-content: center;
    flex-direction: column;
    .add_label {
      margin-top: 3px;
    }
    .down-size {
      font-size: 10px;
      margin-left: 1px;
    }
  }
  .ant-btn-sm {
    margin-right: 6px;
  }
}
</style>
<style lang="scss">
.world-space {
  max-height: 200px;
  overflow-y: scroll;
  text-align: left;
  // width: 80px !important;
}
.check-size {
  position: absolute;
  //left: 3px;
  top: 5px;
  // margin-right: 3px;
  font-size: 10px;
}
.font-check {
  left: 8px !important;
}
.font-dig {
  top: 5px;
  font-size: 12px !important;
  left: 1px !important;
}
.active {
  color: #3d7eff !important;
}
// .anticon-check {
//   display: none;
// }
.text-color-block {
  width: 10px;
  height: 2px;
  background-color: red !important;
  margin-top: -3px;
}
.font-bold {
  font-weight: bold;
}
// .ant-dropdown {
//   min-width: 60px !important;
// }
</style>
